<div
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
  v-kb-modal="isShow"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" class="close"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title"
          >{{Kooboo.text.component.viewEditor.attribute}}</h4
        >
      </div>
      <div class="modal-body">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-md-2"
              >{{Kooboo.text.component.viewEditor.attribute}}</label
            >
            <div class="col-md-10 input-groups">
              <template v-for="(attribute,index) in attributes">
                <div class="input-group" :key="index">
                  <input
                    type="text"
                    class="form-control key"
                    v-kb-typeahead="{source:keys,items: 3}"
                    :placeholder="Kooboo.text.common.key"
                    v-model="attribute.key"
                    style="width:150px;"
                  />
                  <span class="input-group-addon">:</span>
                  <input
                    type="text"
                    class="form-control input-medium"
                    v-model="attribute.value"
                  />
                  <span class="input-group-btn">
                    <a
                      class="btn btn-default"
                      href="#"
                      data-toggle="tooltip"
                      title=""
                      data-original-title="Remove"
                      @click.prevent="removeAttribute(attribute)"
                      ><i class="fa fa-minus"></i
                    ></a>
                  </span>
                </div>
                <div class="margin-bottom-10">
                  <template v-for="(field,i) in attribute.fields">
                    <template v-for="li in field.list">
                      <span
                        class="btn btn-xs btn-default"
                        @click="insertDataField(attribute,li)"
                        href="javascript:;"
                        >{{li.name}}</span
                      >
                    </template>
                  </template>
                </div>
              </template>

              <a
                class="btn dark"
                href="#"
                v-kb-tooltip:top="Kooboo.text.tooltip.add"
                @click.prevent="addAttribute"
                ><i class="fa fa-plus"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn green" @click="save" :disabled="!valid"
          >{{Kooboo.text.common.save}}</button
        >
        <button class="btn gray" aria-hidden="true" data-dismiss="modal"
          >{{Kooboo.text.common.cancel}}</button
        >
      </div>
    </div>
  </div>
</div>
